<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta name="author" content="Darko Bunic"/>
		<meta name="description" content="Drag and drop table content with JavaScript"/>
		<meta name="viewport" content="width=device-width, user-scalable=no"/><!-- "position: fixed" fix for Android 2.2+ -->
		<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
		<script type="text/javascript" src="../header.js"></script>
		<script type="text/javascript" src="../redips-drag-min.js"></script>
		<script type="text/javascript" src="script.js"></script>
		<title>Example 1: Three tables</title>
	</head>
	<body>
		<!-- tables inside this DIV could have draggable content -->
		<div id="drag">
			<table id="table1">
				<colgroup><col width="100"/><col width="100"/><col width="100"/><col width="100"/><col width="100"/></colgroup>
				<tr>
					<td class="mark">You</td>
					<td class="mark">can</td>
					<td class="mark">not</td>
					<td class="mark">drop</td>
					<td class="mark">here</td>
				</tr>
				<tr style="background-color: #eee">
					<td><div id="d1" class="drag t1">Drag</div></td>
					<td></td>
					<td><div id="d2" class="drag t1">and</div></td>
					<td><div id="d3" class="drag t1">drop</div></td>
					<td></td>
				</tr>
				<tr>
					<td><div id="d4" class="drag t1">content</div></td>
					<td></td>
					<td></td>
					<td></td>
					<td><div id="d5" class="drag t1"><select style="width: 60px"><option>table</option><option>drop</option><option>down</option><option>menu</option></select></div></td>
				</tr>
				<tr style="background-color: #eee">
					<td></td>
					<td><div id="d6" class="drag t1">with</div></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td><div id="d7" class="drag t1">JavaScript</div></td>
					<td></td>
					<td></td>
				</tr>
				<tr style="background-color: #eee">
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td><div id="d8" class="drag t1"><img id="smile_img" src="icon_smile.gif"/></div></td>
					<!-- <td><div id="d8" class="drag t1"><img id="smile_img" src="/wp-includes/images/smilies/icon_smile.gif"/></div></td> -->
				</tr>
			</table>
			<table id="table2">
				<colgroup><col width="100"/><col width="100"/><col width="100"/><col width="100"/><col width="100"/></colgroup>
				<tr>
					<td class="mark" title="You can not drop here">Table2</td>
					<td style="background-color: #eee"><div id="d9" class="drag t2">and</div></td>
					<td rowspan="3" style="background-color: #C6C8CB" title="rowspan 3"></td>
					<td style="background-color: #eee"></td>
					<td></td>
				</tr>
				<tr>
					<td><div id="d10" class="drag t2">Drag</div></td>
					<td style="background-color: #eee"></td>
					<td style="background-color: #eee"><div id="d11" class="drag t2">drop</div></td>
					<td><div id="d12" class="drag t2">table</div></td>
				</tr>
				<tr>
					<td colspan="2" style="background-color: #C6C8CB" title="colspan 2"></td>
					<td colspan="2" style="background-color: #C6C8CB" title="colspan 2"></td>
				</tr>
				<tr>
					<td colspan="2" style="background-color: #C6C8CB" title="colspan 2"></td>
					<td rowspan="3" style="background-color: #C6C8CB" title="rowspan 3"></td>
					<td colspan="2" style="background-color: #C6C8CB" title="colspan 2"></td>
				</tr>
				<tr>
					<td><div id="d13" class="drag t2"><input type="text" style="width: 60px" value="content"/></div></td>
					<td style="background-color: #eee"></td>
					<td style="background-color: #eee"></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td style="background-color: #eee"><div id="d14" class="drag t2">with</div></td>
					<td style="background-color: #eee"><div id="d15" class="drag t2">JavaScript</div></td>
					<td class="mark smile" title="Only smile can be placed here"></td>
				</tr>
			</table>
			<table id="table3">
				<colgroup><col width="100"/><col width="100"/><col width="100"/><col width="100"/><col width="100"/></colgroup>
				<tr style="background-color: #eee">
					<td id="message" class="mark" title="You can not drop here">Table3</td>
					<!-- jump to smile image -->
					<td><div id="link1" class="drag t3"><a href="#smile_img" title="Jump to the smile image (links can be used as well)">Smile</a></div></td>
					<td></td>
					<td></td>
					<td><div id="d16" class="drag t3"><input type="checkbox" name="cb1"/><input type="checkbox" name="cb2"/><input type="checkbox" name="cb3"/></div></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td><div id="d17" class="drag t3 clone" title="infinite cloning">Clone</div></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td><div id="d18" class="drag t3 clone climit1_3" title="Clone three elements">(1) Clone</div></td>
					<td></td>
					<td></td>
					<td></td>
					<td><div id="d19" class="drag t3 clone climit2_2" title="Clone two elements and die">(2) Clone</div></td>
				</tr>
				<tr style="background-color: #eee">
					<td><div id="d20" class="drag t3"><input type="radio" name="radio1"/><input type="radio" name="radio1"/><input type="radio" name="radio1"/></div></td>
					<td></td>
					<td></td>
					<td></td>
					<td class="trash" title="Trash">Trash</td>
				</tr>
			</table>
			<div><input type="button" value="Save1" class="button" onclick="save('plain')" title="Send content to the server (it will only show accepted parameters)"/><span class="message_line">Save content of the first table (plain query string)</span></div>
			<div><input type="button" value="Save2" class="button" onclick="save('json')" title="Send content to the server (it will only show accepted parameters)"/><span class="message_line">Save content of the first table (JSON format)</span></div>
			<div><input type="radio" name="drop_option" class="checkbox" onclick="set_drop_option(this)" value="multiple" title="Enabled dropping to already taken table cells" checked="true"/><span class="message_line">Enable dropping to already taken table cells</span></div>
			<div><input type="radio" name="drop_option" class="checkbox" onclick="set_drop_option(this)" value="single" title="Disabled dropping to already taken table cells"/><span class="message_line">Disable dropping to already taken table cells</span></div>
			<div><input type="radio" name="drop_option" class="checkbox" onclick="set_drop_option(this)" value="switch" title="Switch content"/><span class="message_line">Switch content</span></div>
			<div><input type="radio" name="drop_option" class="checkbox" onclick="set_drop_option(this)" value="switching" title="Switching content continuously"/><span class="message_line">Switching content continuously</span></div>
			<div><input type="radio" name="drop_option" class="checkbox" onclick="set_drop_option(this)" value="overwrite" title="Overwrite content"/><span class="message_line">Overwrite content</span></div>
			<div><input type="checkbox" class="checkbox" onclick="toggle_delete_cloned(this)" title="Remove cloned object if dragged outside of any table" checked="true"/><span class="message_line">Remove cloned element if dragged outside of any table</span></div>
			<div><input type="checkbox" class="checkbox" onclick="toggle_confirm(this)" title="Confirm delete" checked="true"/><span class="message_line">Confirm delete</span></div>
			<div><input type="checkbox" class="checkbox" onclick="toggle_dragging(this)" title="Enable dragging" checked="true"/><span class="message_line">Enable dragging</span></div>			
		</div>
	</body>
</html>